<style type="text/css">
	.container_content .content>li{
		display: none;
	}
	.container_content .content>.current{
		display: block!important;
	}
</style>
<!-- 导航栏 -->
<div class="tabs is-boxed">
	<ul></ul>
</div>

<!-- 对应内容 -->
<div class="container_content">
	<ul class="content content_ydc"></ul>
</div>

<script src="public/ydc_data.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	var Arr; //获取导航栏名称数据
	var tabsContent; //导航栏对应内容
	if (navName_url == 'index' || navName_url == '') {
		Arr = home_tabs;
		tabsContent = 'IndexContent';
		$('.content_ydc').load('IndexContent_ydc.html')
	} else if (navName_url == 'bulma_ydc') {
		Arr = bulma_tabs;
		tabsContent = 'bulmaContent';
		$('.content_ydc').load('bulmaContent_ydc.html')
	} else if (navName_url == 'icon_ydc') {
		Arr = icon_tabs;
		tabsContent = 'IconContent';
		$('.content_ydc').load('IconContent_ydc.html')
	} else if(navName_url == '100day'){
		Arr = day100_tabs;
		$('.content_ydc').load('100dayContent.html')
	} 
	// 添加tabs的li>a页面
	for (let i = 0; i < Arr.length; i++) {
		//定义描点，方便跳转
		// $('.tabs ul').append(`<li><a href="#` + tabsContent + i + `">` + Arr[i] + `</a></li>`);
		$('.tabs ul').append(`<li><a>` + Arr[i] + `</a></li>`);
	}
	$('.tabs ul li').eq(0).addClass('is-active'); //默认显示导航栏第一个



	// for(let i=0;i<Arr.length;i++){
	//  // 添加content>li内容：
	//  // $('#content').append(`<li>`+Arr[i]+`</li>`);
	// 	  $('.content').append(`<li id="`+ tabsContent + i+`"></li>`);

	//  // 添加content>li内容放到页面上去：
	//  $('.content li').eq(i).append(tabsContent+i);

	// }
	// $('.content li').eq(0).addClass('current');//默认显示导航栏第一个内容


	// tabs>li点击事件：添加类名
	$('.tabs ul li').bind('click', function() {
		var index = $(this).index();
		// console.log(index);

		// 添加is-active类名
		$('.tabs ul li').removeClass('is-active').eq(index).addClass('is-active');
		$('.content_ydc>li').removeClass('current').eq(index).addClass('current');
		
	});
	

});
</script>
